<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
       <style type="text/css">
       #container{
           width: 100%;
           height: 500px;
           display: flex;
           padding-top: 200px;
           justify-content: center;
       }
      #borders{
           width: 600px;
           height: 100PX;
           border: 1px red solid;
           display: flex;
           justify-content: center;
           overflow: hidden;
       }
       #outs{
           width: 100%;
           height: 400px;
           display: flex;
            overflow: hidden;
         /*  justify-content: center; */
           
       }
         #imglist{
               width: 1600px;
               height: 100px; 
               display: flex;
               
          }
        #imglist img{
            width: 100px;
            height: 100px;
        }
         
       </style>
    </head>
    <body>
        <div id="container">
            <div id="borders">
                <div id="outs">
                    <div id="imglist" onmouseenter="enters();" onmouseleave="leaves();">
                        <img src="img/1.jpeg" >
                        <img src="img/2.jpeg" >
                        <img src="img/3.jpeg" >
                        <img src="img/4.jpeg" >
                        <img src="img/5.jpeg" >
                        <img src="img/6.jpeg" >
                        <img src="img/7.jpeg" >
                        <img src="img/8.jpeg" >
                        <img src="img/9.jpeg" >
                        <img src="img/10.jpeg" >
                        <img src="img/1.jpeg" >
                        <img src="img/2.jpeg" >
                        <img src="img/3.jpeg" >
                        <img src="img/4.jpeg" >
                        <img src="img/5.jpeg" >
                        <img src="img/6.jpeg" >
                    </div>
                </div>
            </div>
        </div>
            
        
    </body>
    <script type="text/javascript">
        var imgs =document.getElementById('imglist');
        var imgss = 0;
        var myInterval ='';
          
        function actionss(){
            imgss--;
            imgs.style.marginLeft =imgss+'px';
            if(imgss== -1000){
                imgss =0;
            }       
            if(imgss%100 == 0){
                 clearInterval(myInterval); 
                 setTimeout(function(){
                        myInterval =setInterval(actionss,10)
                 },1000)
            }
        }
          onload = function(){
             myInterval= setInterval(actionss,10)
            }  
            
            
            
        function enters(){
           clearInterval(myInterval);
        }
        function leaves(){
           setInterval(actionss,10);
          
        }
    </script>
</html>
